<template>
    <div class="species-introduction container-bottom-20">
        <CardBox title="物种介绍"></CardBox>
        <div class="content-container content-container-height-262">
            <div class="species-card">
                <div class="species-image">
                    <img src="@/assets/img/bird.png" alt="牡丹">
                </div>
                <div class="species-info">
                    <div class="species-name">
                        牡丹 (Paeonia suffruticosa)
                    </div>
                    <div class="species-description">
                        牡丹素有"花中之王"、"国色天香"之称，是中国传统名花之一，其花大色艳，花型优美，具有固老安神的功效和药用价值，完整姿态时，层层花瓣舒展，姿态优雅大方。
                    </div>
                    <div class="species-tags">
                        <div class="tag">花期：4-5月</div>
                        <div class="tag">喜阳光</div>
                        <div class="tag">适中浇水</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import CardBox from '@/components/Global/CardBox.vue'
export default {
    components: {
        CardBox
    },
    data() {
        return {
            speciesData: {
                name: '牡丹',
                latinName: 'Paeonia suffruticosa',
                description: '牡丹素有"花中之王"、"国色天香"之称，是中国传统名花之一，其花大色艳，花型优美，具有固老安神的功效和药用价值，完整姿态时，层层花瓣舒展，姿态优雅大方。',
                floweringPeriod: '4-5月',
                tags: ['喜阳光', '适中浇水']
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.species-introduction {
    .species-image {
        width: 100%;
        height: 80px;
        img {
            width: 100%;
            height: 100%;
        }
    }

    .species-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 15px;
        padding: 10px;
    }

    .species-name {
        font-size: 18px;
        color: #fff;
        font-weight: 500;
    }

    .species-description {
        color: rgba(255, 255, 255, 0.8);
        font-size: 14px;
        line-height: 1.6;
    }

    .species-tags {
        display: flex;
        gap: 10px;
        margin-top: auto;

        .tag {
            background: rgba(7, 255, 229, 0.1);
            border: 1px solid #07FFE5;
            color: #07FFE5;
            padding: 4px 12px;
            border-radius: 4px;
            font-size: 12px;
        }
    }
}
</style>